/* 
1 打开页面的时候 看到学员信息数据
  1 定义一个函数  发送请求获取数据 渲染页面 

  2 新增学员
  1 点击  “新增” 按钮 弹出模态框 - 显示新增 表单   已经实现 
  2 新增表单中  籍贯 下拉列表  
        1 重新去熟悉  select 标签
        2 考虑结合业务 实现 
        3 发送请求 获取 城市相关数据 来渲染 下拉列表 
       2 需要给 省 下拉列表 绑定 change 事件 
        1 事件触发  获取选中的 “省” 拼接成参数 发送给后端 来获取对应 市 
          后端响应对应  市 数据了，显示在 新增表单中  市 下拉列表中 
      3 需要给 市 下拉列表 绑定 change事件 
        1 事件触发了 获取选中的 市 拼接成参数 发送给后端 来获取对应的 县 
          后端响应对应 县 数据了， 显示在 新增表单中  县  下拉列表 
  3 给新增表单  绑定 提交事件
    1 阻止默认行为
    2 快速获取新增表单中的值
    3 拼接成参数发送给后端 完成新增
    4 成功 
      1 提示用户 新增成功
      2 重置新增表单
      3 关闭模态框
      4 发送请求获取最新的数据

   3 编辑学员
   1 给 编辑 按钮绑定点击事件
     1 弹出编辑-模态框
   2 获取被编辑数据的id 发送给后端 后端响应数据 
    3 获取到数据 广东省广州市越秀区 显示在 编辑表单中 
    3 省份城市区
      1 省份不管管 打开页面的时候 初始化的获取过里面的数据 
      2 市 发送一个请求-广东省发过去，返回 市信息 显示在 select标签 

  2 先设置一下 下拉列表 也能正常使用  先实现！！  

  3 给编辑表单绑定 提交事件 
    1 阻止默认行为
    2 快速获取编辑表单中的值
    3 拼接成参数发送给后端 完成编辑
    4 成功 
      1 提示用户 编辑成功
      2 重置编辑表单
      3 关闭模态框
      4 发送请求获取最新的数据 

4 删除学员
  1 给删除按钮绑定点击事件
  2 事件触发 
  3 确认框询问用户
  4 获取要删除数据的id
  5 拼接参数 发送给后端完成删除
  6 提示用户 
  7 获取最新数据 


  
 */

  const tbody = document.querySelector('tbody');
  const addForm = document.querySelector('#addModal form');
  const updateForm = document.querySelector('#updateModal form'); // 编辑增表单


//   发送请求 获取数据渲染页面
function getStudenList() {
axios.get('/student/list').then((result) => {
    if(result.data.code === 0) {
        const list = result.data.data;
        // console.log(list);
        // console.table(list);

        const html = list.reduce(
            (h,v) =>
            h +
            `
            <tr>
        <th scope="row">${v.id}</th>
        <td>${v.name}</td>
        <td>${v.age}</td>
        <td>${v.sex}</td>
        <td>${v.group}</td>
        <td>${v.phone}</td>
        <td>${v.salary}</td>
        <td>${v.truesalary}</td>
        <td>${v.province + v.city + v.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm update-show-modal" data-id="${v.id}">修改</button>
          <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${v.id}">删除</button>
        </td>
      </tr>
            `
            ,'');
            tbody.innerHTML = html
    }
});
}
        // 发送请求获取数据  显示到对应的 下拉列表中
        // url 接口地址
        // params 接口的参数
        // dom 目标下列表
        // label 下拉列表默认显示的文本
        function renderSelect(url,params,dom,label,value='') {
            axios.get(url,{params}).then((result) => {
                dom.innerHTML = result.data.reduce(
                    (h,v) => h + `<option value="${v}">${v}</option>`,
                    `<option value="">--${label}--</option>`
                )
                // 设置 select标签 选中某个值
                dom.value = value;
            });
        }

    // 初始化 新增表单 中 下拉列表
    function initSelect(selector) {
    // 发送请求获取城市数据 来渲染下拉列表   会导致 错题提示 出现  处理
    // 原因可能是  普通数据 返回的格式   和  城市列表返回数据格式 不一样
    // 让后端去调整  返回的数据结构 必须一致！！！！
    const provinceSelect = document.querySelector(`${selector} [name=province]`);
    const citySelect = document.querySelector(`${selector} [name=city]`);
    const countySelect = document.querySelector(`${selector} [name=county]`);

    // 获取省份数据
    renderSelect('/geo/province',{},provinceSelect,'省');

    // 新增中 省 change事件
    provinceSelect.addEventListener('change',function(){
    console.log(provinceSelect.value);
    // 根据省来获取市
    renderSelect('/geo/city',
    {pname:provinceSelect.value},
    citySelect,
    '市');
})

// 新增中 市  change事件
citySelect.addEventListener('change',function(){
    console.log(citySelect.value);

    // 发送请求 获取县
    renderSelect(
        '/geo/county',
        {pname:provinceSelect.value,cname:citySelect.value,},
        countySelect,
        '县'
    );
})
        }




// 发送请求 获取数据渲染页面
getStudenList();

// 初始化新增表单的 下拉列表
initSelect('#addModal');

// 初始化编辑表单的  下拉列表
initSelect('#updateModal');


// 绑定 新增表单 提交事件
addForm.addEventListener('submit',function(e){
    e.preventDefault();
    // 获取表单数据
    const data = $(addForm).serialize();
    // 发送请求 完成新增
    axios.post('/student/add',data).then((result) => {
        if(result.data.code === 0) {
            // 成功
            toastr.success(result.data.message);
            // 重置新增表单
            addForm.reset();
            // 关闭模态框
            $('#addModal').modal('hide');
            // 获取最新的数据
            getStudenList();
        }
    });
});

// 给tbody标签绑定点击事件
// 编辑 点击
tbody.addEventListener('click',function(e){
const dom = e.target;
if(dom.classList.contains('update-show-modal')) {
    // 弹出 编辑 模态框
    $('#updateModal').modal('show');
    // 获取 被编辑的数据id
    const id = dom.dataset.id;

    axios.get('/student/one',{params:{id}}).then((result) => {
        // 获取 对象
        const obj = result.data.data;

        // 大功能 把对象数据 显示在 form标签中 start
        for (const key in obj) {
            // 根据key 去查找对应的dom元素
            const target = document.querySelector(`#updateModal [name=${key}]`);

            // 性别 单选框 特殊！！！
            if(key === 'sex') {
                // 根据 当前 性别的值 （obj.sex）找到 对应的 性别 单选框 让它选中
                // 既要找到 name = sex 而且 value = obj.sex 标签
                document.querySelector(
                    `#updateModal [name=sex][value=${obj.sex}]`).checked = true;
                    continue;   // 跳过下面的代码
            }

            // 当找到了这个dom元素 我们才可以设置 给普通的表单元素使用
            if(target) {
                target.value = obj[key];
            } 
        }

        // 根据省信息 来获取市 显示处理 异步！！！！
        renderSelect(
            '/geo/city',
            { pname: obj.province },
            document.querySelector('#updateModal [name=city]'),
            '市',
            obj.city
        );

        // 根据省和市 来 获取 县  默认选中
      renderSelect(
        '/geo/county',
        { pname: obj.province, cname: obj.city },
        document.querySelector('#updateModal [name=county]'),
        '市',
        obj.county
      );
    });
} else if (dom.classList.contains('delete-btn')) {
    if (confirm('您确定删除吗？')) {
        const id = dom.dataset.id;
        axios.delete('/student/delete',{ params: { id } }).then((result) => {
            if(result.data.code === 0) {
                toastr.success(result.data.message);
                getStudenList();
            }
        });
    }
}
});

// 绑定 编辑表单 提交事件
updateForm.addEventListener('submit',function(e){
    e.preventDefault();
    // 获取表单数据
    const data = $(updateForm).serialize();
    // 发送请求 完成新增
    axios.put('/student/update',data).then((result) => {
        if(result.data.code === 0) {
            // 成功
            toastr.success(result.data.message);
            // 重置 表单
            updateForm.reset();
            // 关闭模态框
            $('#updateForm').modal('hide');
            // 获取最新的数据
            getStudenList();
        }
    });
});

